<template>
  <div class="timeCanvas">
    <div class="time" :style="timeStyle">
      <i class="el-icon-timer"></i>{{ time }}
    </div>
    <div class="goto" v-if="showTitle" @click="gotoLink">
      芝罘区新能源公务出行碳排放效益贡献
    </div>
  </div>
</template>

<script>
export default {
  name: "PublicTop",
  props: {
    showTitle: {
      default: true,
      type: Boolean,
      required: false,
    },
    timeStyle: {
      type: Object,
      required: false,
    },
  },
  data() {
    return {
      time: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    gotoLink() {
      this.$router.push({
        path: "/about",
      });
    },
    init() {
      setInterval(() => {
        this.time = this.formatDate(new Date());
      }, 1000);
    },
    repair(i) {
      if (i >= 0 && i <= 9) {
        return "0" + i;
      } else {
        return i;
      }
    },
    formatDate(time) {
      let date = new Date(time);
      let year = date.getFullYear(),
        month = this.repair(date.getMonth() + 1), //月份是从0开始的
        day = this.repair(date.getDate()),
        hour = this.repair(date.getHours()),
        min = this.repair(date.getMinutes()),
        sec = this.repair(date.getSeconds());
      let formatedDate = `${year}-${month}-${day} ${hour}:${min}:${sec}`;
      return formatedDate;
    },
  },
};
</script>

<style lang="scss" scoped>
.timeCanvas {
  padding-right: 10px;

  .time {
    text-align: right;
    margin: 10px 0;
    color: rgb(0, 94, 255);
    font-size: 20px;
  }
  .goto {
    color: rgb(12, 246, 48);
    font-size: 16px;
    cursor: pointer;
  }
}
</style>
